//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin accordion() {
    /* ==========================================================================
       Accordion

       Default Mendix accordion widget styles.
    ========================================================================== */

    .widget-accordion {
        .widget-accordion-group {
            @include get-accordion-group-styles(
                $accordion-header-default-bg,
                $accordion-header-default-bg-hover,
                $accordion-header-default-color,
                $brand-primary,
                $accordion-default-border-color
            );
        }

        &.widget-accordion-preview {
            .widget-accordion-group {
                @include get-accordion-preview-group-styles($accordion-header-default-color);
            }
        }
    }
}

@mixin get-accordion-group-styles($background-color, $background-color-hover, $color, $color-hover, $border-color) {
    border-color: $border-color;
    background-color: $bg-color-secondary;

    &:first-child {
        border-top-left-radius: $border-radius-default;
        border-top-right-radius: $border-radius-default;

        > .widget-accordion-group-header > .widget-accordion-group-header-button {
            border-top-left-radius: calc(#{$border-radius-default} - 1px);
            border-top-right-radius: calc(#{$border-radius-default} - 1px);
        }
    }

    &:last-child {
        border-bottom-left-radius: $border-radius-default;
        border-bottom-right-radius: $border-radius-default;
    }

    &.widget-accordion-group-collapsed:last-child,
    &.widget-accordion-group-collapsing:last-child {
        > .widget-accordion-group-header > .widget-accordion-group-header-button {
            border-bottom-left-radius: calc(#{$border-radius-default} - 1px);
            border-bottom-right-radius: calc(#{$border-radius-default} - 1px);
        }
    }

    &.widget-accordion-group-collapsing:last-child {
        > .widget-accordion-group-header > .widget-accordion-group-header-button {
            transition: border-radius 5ms ease 200ms;
        }
    }

    &.widget-accordion-group-expanding:last-child {
        > .widget-accordion-group-header > .widget-accordion-group-header-button {
            transition: border-radius 5ms ease 80ms;
        }
    }

    > .widget-accordion-group-header > .widget-accordion-group-header-button {
        cursor: auto;
        background-color: $background-color;
        padding: $spacing-medium;

        > :is(h1, h2, h3, h4, h5, h6) {
            font-size: $font-size-h5;
            font-weight: $font-weight-header;
        }

        > :is(h1, h2, h3, h4, h5, h6, p, span) {
            color: $color;
        }

        .widget-accordion-group-header-button-icon {
            fill: $color;
        }

        &.widget-accordion-group-header-button-clickable {
            &:hover,
            &:focus,
            &:active {
                background-color: $background-color-hover;

                > :is(h1, h2, h3, h4, h5, h6, p, span) {
                    color: $color-hover;
                }

                .widget-accordion-group-header-button-icon {
                    fill: $color-hover;
                }
            }
        }
    }

    > .widget-accordion-group-content-wrapper > .widget-accordion-group-content {
        border-color: $border-color;
        padding: $spacing-small $spacing-medium $spacing-large $spacing-medium;
    }
}

@mixin get-accordion-preview-group-styles($color) {
    .widget-accordion-group-header-button {
        > div > :is(h1, h2, h3, h4, h5, h6) {
            font-size: $font-size-h5;
            font-weight: $font-weight-header;
        }

        > div > :is(h1, h2, h3, h4, h5, h6, p, span) {
            color: $color;
        }
    }
}
